<template>
  <div class="contact-container">
    <ul>
      <li>
        <a :href="common.github">
          <IconFon icon="github"></IconFon>
          <span>{{ common.githubName }}</span>
        </a>
      </li>
      <li>
        <a :href="`mailto:${common.mail}`">
          <IconFon icon="mail"></IconFon>
          <span>{{ common.mail }}</span>
        </a>
      </li>
      <li>
        <a
          :href="`tencent://message/?Menu=yes&uin=${common.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`"
        >
          <IconFon icon="qq"></IconFon>
          <span>{{ common.qq }}</span>
          <div class="contact-img">
            <img :src="common.qqQrCode" alt="" />
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <IconFon icon="weixin"></IconFon>
          <span>{{ common.weixin }}</span>
          <div class="contact-img">
            <img :src="common.weixinQrCode" alt="" />
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import IconFon from "@/components/IconFon/index.vue";
const { common } = defineProps({
  common: {
    type: Object,
    default: {},
  },
});
</script>

<style scoped>
.contact-container {
  margin-top: 50px;
}

.contact-container a {
  color: #b4b8bc;
}

.contact-container ul li a i {
  font-size: 24px;
  margin-right: 15px;
}

.contact-container ul li:hover a {
  color: #6b9eee;
}

ul li {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 15px;
  padding-left: 15px;
  color: #b4b8bc;
  position: relative;
}

.contact-container ul li a:hover .contact-img {
  transform: scaleY(1);
}

.contact-img {
  position: absolute;
  bottom: 33px;
  left: 30px;
  height: 130px;
  min-width: 130px;
  background-color: #fff;
  display: flex;
  align-items: center;
  transition: 0.5s;
  justify-content: center;
  transform: scaleY(0);
  transform-origin: center bottom;
  border-radius: 5px;
}

.contact-img::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #fff;
  bottom: -5px;
}

.contact-img img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>
